<!-- 预充值管理 -->
<template>
	<view class="container flex_C">
		<FeNavbar title="预充值管理" />
		<view class="" style="height: 446rpx;">
			<view class="top-wrap">
				<view class="title">预充值余额</view>
				<view class="money-value-row">
					<text>{{balanceValue}}
						<text class="unit">USDT</text>
					</text>
				</view>
				<image class="gold-icon" src="/static/mine/ycz-gold.png" mode="aspectFill"></image>
				<view class="prep-btn" @click="handleShowPanel">充值</view>
			</view>
			<view class="f-box">
				<view class="f-line">
					<text>充值记录</text>
				</view>
			</view>
		</view>
		<view class="flex_1">
			<z-paging :fixed="false" ref="refPaging" :auto-show-system-loading="true" v-model="rechargeLogs"
				@query="reqList">
				<view class="prep-list">
					<view class="p-log-item" v-for="(item,index) in rechargeLogs" :key="index">
						<view class="left-content">
							<text>{{item.eventName}}</text>
							<view class="time">{{item.time}}</view>
						</view>
						<view class="right-content" v-if="item.num>0">+{{item.balanceChange}} USDT</view>
						<view class="right-content red" v-else>{{item.balanceChange}} USDT</view>
					</view>
				</view>
			</z-paging>
		</view>
		<rechargePanel ref="refRechargePanel" />
	</view>
</template>

<script>
	import rechargePanel from "@/components/rechargePanel/rechargePanel.vue"
	import {
		balanceApi,
		prepaidHistory
	} from "@/api/prepaid.js"

	export default {
		components: {
			rechargePanel
		},
		data() {
			return {
				balanceValue: 0,
				rechargeLogs: [],
				limit: 10,
				page: 1
			};
		},
		onLoad() {
			this.reqBalanceApi();
		},
		methods: {
			// 预充值余额
			async reqBalanceApi() {
				const result = await balanceApi();
				this.balanceValue = result.data.balance || 0;
			},

			reqList(pageNo, pageSize) {
				prepaidHistory({
					limit: pageSize,
					page: pageNo,
				}).then(res => {
					const list = res.data.history.map(item => {
						console.log(parseFloat(item.balanceChange))
						return {
							...item,
							num: parseFloat(item.balanceChange),
							time: this.momentFormat(item.createTime)
						}
					})
					this.$refs.refPaging.complete(list);
				}).catch(res => {
					this.$refs.refPaging.complete(false);
				})
			},

			handleShowPanel() {
				this.$refs.refRechargePanel.show();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;

		&>.flex_1 {
			height: 0;
		}

		.top-wrap {
			min-height: 370rpx;
			background-color: #fff;
			position: relative;
			padding: 0 32rpx;

			.title {
				font-size: 30rpx;
				line-height: 35rpx;
				color: #7B828A;
				text-align: left;
				padding-top: 48rpx;
			}

			.money-value-row {
				display: flex;
				align-items: flex-end;
				font-weight: bold;
				color: $font-color;
				padding-top: 28rpx;
				word-break: break-all;

				text {
					font-size: 66rpx;
					line-height: 77rpx;
				}

				.unit {
					font-size: 38rpx;
					line-height: 45rpx;
					margin-left: 16rpx;
				}
			}

			.gold-icon {
				width: 180rpx;
				height: 180rpx;
				position: absolute;
				right: 0;
				top: 0;
			}

			.prep-btn {
				height: 92rpx;
				line-height: 92rpx;
				text-align: center;
				font-size: 32rpx;
				color: $font-color;
				font-weight: 600;
				background-color: $btn-bg-color;
				border-radius: 12rpx;
				margin-top: 44rpx;
			}
		}

		.f-box {
			height: 76rpx;
			background-color: #F5F7F8;
			display: flex;
			align-items: center;

			.f-line {
				width: 404rpx;
				height: 2px;
				background-color: #DBE0E6;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					font-size: 26rpx;
					line-height: 30rpx;
					text-align: center;
					color: #7B828A;
					background-color: #F5F7F8;
					padding: 0 24rpx;
				}
			}
		}

		.prep-list {
			padding: 0 32rpx 100rpx 32rpx;
			flex: 1;
			overflow-y: scroll;
			overflow-x: hidden;

			.p-log-item {
				min-height: 128rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #DBE0E6;

				.left-content {
					flex: 1;

					text {
						font-size: 32rpx;
						line-height: 38rpx;
						color: $font-color;
					}

					.time {
						font-size: 24rpx;
						line-height: 28rpx;
						color: #A6ACB4;
						margin-top: 8rpx;
					}
				}

				.right-content {
					font-size: 34rpx;
					line-height: 40rpx;
					color: #26282B;
					font-weight: bold;

					&.red {
						color: #F04848;
					}
				}
			}
		}
	}
</style>